<template>
	<view class="">
		<block v-for="(item,index) in list" :key="index">
			<view class="manito-list tn-flex tn-flex-col-center"
				@click="goBloggerOther(item.play_goods_id,item.play_mstching_id)">
				<view class="left">
					<image :src="item.avatar" mode="aspectFill" class="avatar"></image>
					<!-- <view class="audio tn-flex tn-flex-col-center tn-flex-row-center" @click.stop="play(index,item.voice)">
						<image src="https://web.lanmei.co/image/pause.png" class="play" v-if="playIndex == index" mode=""></image>
						<image src="/static/index/play.png" class="play" v-else mode=""></image>
						<text class="seconds">{{item.duration}}s</text>
					</view> -->
				</view>
				<view class="right">
					<view class="top tn-flex tn-flex-col-center tn-flex-row-between">
						<text class="name clamp-text-1">{{item.nickname}}</text>
						<view class="state tn-flex tn-flex-col-center" :class="item.is_order ? 'on-line' : 'off-line'">
							<view class="dian"></view>
							<text class="text">{{item.is_order ? '在线' : '离线'}}</text>
						</view>
					</view>
					<view class="center tn-flex">
						<!-- 男 -->
						<view class="tag nan" v-if="item.sex == 1">
							<image src="/static/index/nan.png" class="img1" mode=""></image>
							<text v-if="item.age > 0">{{item.age}}</text>
						</view>
						<view class="tag nv" v-if="item.sex == 2">
							<image src="/static/index/nv.png" class="img2" mode=""></image>
							<text v-if="item.age > 0">{{item.age}}</text>
						</view>
						<view class="tag tag-bg" v-if="item.is_up == 1">
							<text>包上分</text>
						</view>
					</view>
					<view class="bottom tn-flex tn-flex-col-center tn-flex-row-between">
						<view class="game-type tn-flex tn-flex-col-center">
							<image :src="item.game_img" mode="aspectFill"></image>
							<text class="t1">{{item.game_name}}</text>
							<text class="t2">{{item.play_type_name}}</text>
						</view>
						<view class="price">
							<text class="t1">{{item.price - 0}}海豚币</text>
							<text class="t2">/{{item.unit}}</text>
						</view>
					</view>
				</view>
			</view>
		</block>

	</view>

</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		name: "manito-list",
		props: {
			list: {
				type: Array
			}
		},
		data() {
			return {
				playIndex: -1 //当前播放中的声音
			};
		},
		mounted() {
			innerAudioContext.onEnded(res => {
				console.log('播放结束')
				this.playIndex = -1
			})
		},
		methods: {
			goBloggerOther(id, play_mstching_id) {

				if (play_mstching_id) {
					uni.navigateTo({
						url: `/circlePages/blogger_other?id=${id}&mid=${play_mstching_id}`
					})
					// let url = `/circlePages/blogger_other?id=${id}&mid=${play_mstching_id}`
					// this.navigateToFn({ url, checkLogin: true })
				} else {
					uni.navigateTo({
						url: "/circlePages/blogger_other?id=" + id
					})
					// let url = `/circlePages/blogger_other?id=${id}`
					// this.navigateToFn({ url:`/circlePages/blogger_other?id=${id}`, checkLogin: true })
				}

			},
			play(index, src) {
				if (this.playIndex == index) {
					this.playIndex = -1
					innerAudioContext.stop()
				} else {
					innerAudioContext.src = src
					innerAudioContext.play()
					this.playIndex = index
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.manito-list {
		//background-color: $uni-manito-list-bg-color;
		box-shadow: inset 0px 0px 3px 0px #7059e3;
		//height: 208rpx;
		border-radius: 20rpx;
		//padding: 0 24rpx 0 0;
		padding: 8px 10px;
		margin-bottom: 24rpx;
		overflow: hidden;

		.left {
			position: relative;
		}

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 20rpx;
			background-color: #f5f5f5;
		}

		.audio {
			height: 32rpx;
			position: absolute;
			bottom: 20rpx;
			left: 20rpx;
			// right: 30rpx;
			background: linear-gradient(90deg, #F783C3 0%, #A66FF7 100%);
			border-radius: 16rpx;
			padding: 0 12rpx;

			.play {
				width: 22rpx;
				height: 22rpx;
			}

			.seconds {
				font-size: 20rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin-left: 5rpx;
			}
		}

		.right {
			flex: 1;
			padding-left: 24rpx;
			height: 140rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.top {
				.name {
					width: 440rpx;
					font-size: 32rpx;
					font-weight: bold;
					color: $uni-text-color;
				}

				.state {
					flex: 1;
					justify-content: flex-end;

					.dian {
						width: 8rpx;
						height: 8rpx;
						border-radius: 50%;
						margin-right: 4rpx;
					}

					.text {
						font-size: 20rpx;
						font-weight: 400;
					}
				}

				.off-line {
					.dian {
						background: #999999;
					}

					.text {
						color: #979393;
					}
				}

				.on-line {
					.dian {
						background: #26FB4A;
					}

					.text {
						color: #333333;
					}
				}

			}

			.center {
				margin-top: 8rpx;
				margin-bottom: 17rpx;

				.tag {
					height: 34rpx;
					border-radius: 6rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: #FFFFFF;
					padding: 0 8rpx;
					line-height: 34rpx;
					margin-right: 10rpx;

					.img1 {
						width: 16rpx;
						height: 16rpx;
						margin-right: 6rpx;
					}

					.img2 {
						width: 14rpx;
						height: 18rpx;
						margin-right: 6rpx;
					}
				}

				.nan {
					background: #69B7FD;
				}

				.nv {
					background-color: #FF91CF;
				}

				.tag-bg {
					background: linear-gradient(180deg, #E2A2B5 0%, #F677B3 100%);
					border-radius: 6rpx;
				}
			}

			.bottom {
				.game-type {
					flex: 1;
					//height: 40rpx;
					//background: linear-gradient(90deg, #654798 0%, #211C3A 100%);
					//border-radius: 21rpx;
					height: 22px;
					background: linear-gradient(133deg, #D0D5FF 0%, #FFFFFF 100%);
					border-radius: 4px 4px 4px 4px;
					width: fit-content;
					padding-left: 8rpx;
					padding-right: 20rpx;

					image {
						width: 30rpx;
						height: 30rpx;
						border-radius: 50%;
					}

					.t1 {
						font-size: 22rpx;
						font-weight: 400;
						color: #333333;
						margin-left: 6rpx;
						margin-right: 20rpx;
					}

					.t2 {
						font-size: 22rpx;
						font-weight: 400;
						color: #892fe8;
					}
				}

				.price {
					.t1 {
						color: #333333;
						font-size: 14px;
					}

					.t2 {
						color: #333333;
						font-size: 22rpx;
					}
				}

			}
		}
	}

	.manito-list:last-child {
		margin-bottom: 0;
	}
</style>